<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="參數名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查詢</el-button>
        <el-button
          v-if="isAuth('member:memberlevel:save')"
          type="primary"
          @click="addOrUpdateHandle()"
        >新增</el-button>
        <el-button
          v-if="isAuth('member:memberlevel:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length === 0"
        >批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width:100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" header-align="center" align="center" label="id">id</el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="等级名称"></el-table-column>
      <el-table-column prop="growthPoint" header-align="center" align="center" label="所需成长值"></el-table-column>
      <el-table-column prop="defaultStatus" header-align="center" align="center" label="默认等级">
        <template slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.defaultStatus==1"></i>
          <i class="el-icon-error" v-else></i>
        </template>
      </el-table-column>
      <el-table-column prop="freeFreightPoint" header-align="center" align="center" label="免运费标准"></el-table-column>
      <el-table-column
        prop="commentGrowthPoint"
        header-align="center"
        align="center"
        label="每次评价获取的成长值"
      ></el-table-column>
      <el-table-column header-align="center" label="特权">
        <el-table-column
          prop="priviledgeFreeFreight"
          header-align="center"
          align="center"
          label="免邮特权"
        >
          <template slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.priviledgeFreeFreight==1"></i>
            <i class="el-icon-error" v-else></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="priviledgeMemberPrice"
          header-align="center"
          align="center"
          label="会员价格特权"
        >
          <template slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.priviledgeMemberPrice==1"></i>
            <i class="el-icon-error" v-else></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="priviledgeBirthday"
          header-align="center"
          align="center"
          label="生日特权"
        >
          <template slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.priviledgeBirthday==1"></i>
            <i class="el-icon-error" v-else></i>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="note" header-align="center" align="center" label="备注"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                   :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
  import AddOrUpdate from './member-level-add-or-update';
  export default {
    components: {
      AddOrUpdate
    },
    name: "level",
    data(){
      return {
        addOrUpdateVisible:false,
        dataListSelections: [],
        dataList: [],
        dataListLoading: false,
        dataForm: {
          key: ''
        },
        pageSize : 10,
        totalPage: 10,
        pageIndex: 1
      }
    },
    methods: {
      deleteHandle(id){
        let ids = id ? [id] : this.dataListSelections.map(item => item.id)
        this.$confirm(
          `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        ).then(() => {
          this.$http({
            url: this.$http.adornUrl("/member/memberlevel/delete"),
            method: "post",
            data: this.$http.adornData(ids, false)
          }).then(({
                     data
                   }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      },

      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList();
      },
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      getDataList() {
        console.log('getDataList called')
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/member/memberlevel/list"),
          method: "get",
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            key: this.dataForm.key
          })
        }).then(({data})=>{
          console.log('datalist',data)
          if (data && data.code == 0) {
            this.dataList = data.page.list;
            this.totalPage = data.page.totalCount;
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        })
      },
      addOrUpdateHandle() {
        console.log('addOrUpdateHandle called')
        this.addOrUpdateVisible = true
        this.$nextTick(()=>{
          this.$refs.addOrUpdate.init()
        })
      }
    }
  }
</script>

<style scoped>

</style>
